/* eslint-disable @typescript-eslint/no-explicit-any */
// import React from 'react'; 
import { Button, Form, Input } from 'antd';

import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Toast } from 'antd-mobile';

function Index() {
  const nav = useNavigate()
  const onFinish = (values: any) => {
    console.log('Success:', values);
    Toast.show({
      content: '注册成功'
    })
    nav('/login')
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{ background: '#fcf1f0' }}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        style={{ maxWidth: 300, margin: '0 auto', padding: '150px 0', minHeight: '100vh' }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <h1 style={{ textAlign: 'center' }}>注册</h1>
        <Form.Item
          name="username"
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input placeholder='Account' prefix={<UserOutlined />} />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input.Password placeholder='Password' prefix={<LockOutlined />} />
        </Form.Item>
        <Form.Item
          name="phone"
          rules={[{ required: true, message: '手机号码不能为空' },
          //校验手机号
          { pattern: /^1[3-9](\d{9})$/, message: '手机号码格式为11位' }
          ]}
        >
          <Input.Password placeholder='secret_key' prefix={<LockOutlined />} />
        </Form.Item>


        <Form.Item label={null}>
          <Button style={{ marginLeft: '-60px' }} type="primary" block htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    </div >
  )
}

export default Index


